<template>
  <section class="w-h-100 not-found-page">
    <canvas ref="canvas" />
  </section>
</template>

<script setup lang="ts">
  import { onBeforeUnmount, onMounted, ref } from "vue";
  import Effect from "@/views/404/Effect";

  const text = "404";
  const canvas = ref();
  let ctx: any = null;
  let effect: any = null;

  onMounted(() => {
    canvas.value.width = window.innerWidth;
    canvas.value.height = window.innerHeight;
    ctx = canvas.value.getContext("2d"); // 画笔
    effect = new Effect(ctx, canvas.value.width, canvas.value.height);
    effect.wrapText(text);
    effect.render();
    animate();

    window.addEventListener("resize", resize);
  });

  onBeforeUnmount(() => {
    window.removeEventListener("resize", resize);
  });

  const animate = () => {
    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
    effect.render();
    requestAnimationFrame(animate);
  };

  const resize = () => {
    canvas.value.width = window.innerWidth;
    canvas.value.height = window.innerHeight;
    effect.resize(canvas.value.width, canvas.value.height);
    effect.wrapText(text);
  };
</script>
